<template>
    <div class="CategoryAdd">
        <el-form label-position="top" label-width="80px" >
          <el-form-item label="分类名">
            <el-input style="width: 200px;" placeholder="分类名请控制在4个字以内" v-model="name"></el-input>
          </el-form-item>
        </el-form>

        <div style="margin-bottom: 15px;">请选择分类图片</div>
        <el-upload
          class="avatar-uploader"
          action="https://xiangtanmarujizhawangluokejiyouxiangongsi.xyz/gzh/img/upload"
          :show-file-list="false"
					name="imgs"
          :on-success="handleAvatarSuccess">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <div style="margin-top: 15px;"></div>
        <el-button type="primary" @click="addCategory">立即添加</el-button>
    </div>
</template>
<script>
// @ 是 /src 的别名
export default {
    name: 'CategoryAdd',
    props: {

    },
    data() {
        return {
            imageUrl: '',
						name: ''
        }
    },
    methods: {
        handleAvatarSuccess(res, file) {
						this.imageUrl = res
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

           
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
				addCategory() {
					if(this.name=='' || this.imageUrl=='') {
						this.$notify.error({
							title: '错误',
							message: '请填写正确的信息'
						});
						return 
					}
					console.log(this.name + "  :  "+ this.imageUrl)
					this.axios.get('/admin/insertCategory?name='+this.name+'&img='+this.imageUrl)
					.then((res)=>{
							this.$notify({
								title: '操作成功',
								message: '成功添加分类',
								type: 'success'
							});
					})
					
				}
    }
}
</script>
<style  lang="styl" scoped>
.CategoryAdd >>> .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.CategoryAdd >>> .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.CategoryAdd >>> .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
}

.CategoryAdd >>> .avatar {
    width: 80px;
    height: 80px;
    display: block;
}
</style>